<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <script>
      function timeOutPro(delay) {
        return new Promise((resolve, reject) => {
          // 处理异步
          setTimeout(() => {
            resolve(`延迟了${delay}秒`);
          }, delay * 1000);
        });
      }

      // async 修饰的函数默认返回 promise 对象
      async function fun1() {
        const res1 = await timeOutPro(1);
        console.log(res1);

        const res2 = await timeOutPro(3);
        console.log(res2);
      }

      async function fun2() {
        const res3 = await timeOutPro(2);
        console.log(res3);

        const res4 = await timeOutPro(4);
        console.log(res4);
      }

      // await 只能限制函数内部的执行顺序，不影响函数外部的执行
      // fun1()
      // fun2()

      console.log(fun1());

      async function fun3() {
        // await 后面跟上 promise 对象
        // await 等待的是 Promise then 的结果
        // await fun1();
        // await fun2();
        fun1().then((res) => {
          fun2();
        });
      }

      console.log("top");
      fun3();
      console.log("bottom");
      // top bottom  1 3 2 4
    </script>
  </body>
</html>
